<template>
    <!-- 人员管理-智能安全帽 -->
    <div class="empBroadcast">
        <div class="left">
            <div class="ipt">
                <Input search enter-button placeholder="请输入关键字"  style="width:200px"  @on-search="onSecach" v-model="groupkeyword"  clearable />
            </div>
            <div class="tree">
                <el-tree ref="tree" :data="treeData"  :render-content="renderContent"  :default-expanded-keys="[0]" node-key="id"></el-tree>
            </div>
        </div>
        <div class="right">
            <div class="top">
                <div class="search">
                    <div class="btnList">
                        <div :class="['item', active == 1 ? 'active' : ''] " @click="setTabsFn(1)">最新</div>
                        <div :class="['item', active == 2 ? 'active' : '']" @click="setTabsFn(2)">历史</div>
                    </div>
                    <div class="list" v-if="active == 2">
                        <DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择上线时间" style="width: 250px" v-model="date" :clearable='false' @on-change="getTime"></DatePicker>
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>
                    <div class="list">
                        <Input search enter-button placeholder="人员姓名搜索"  style="width:250px"  @on-search="onSearch" @on-enter="onSearch" v-model="keyword" clearable />
                        <input type="password" autocomplete="new-password" style="display: none" />
                    </div>

                </div>
                <div class="down">
                    <el-button  @click="download"  plain size="small" :type="!btnList.includes('emp/broadcast/download')?'info':'primary'" :disabled="!btnList.includes('emp/broadcast/download')">导出</el-button>
                </div>
            </div>
            <div class="bottom" v-show="active == 1">
                <div class="table" >
                    <el-table :data="empList" :height="tableHeight" :stripe='true'>
                        <el-table-column prop="empName" label="人员姓名" ></el-table-column>
                        <el-table-column prop="groupName" label="所属班组"></el-table-column>
                        <el-table-column prop="code" label="安全帽编号" width="150"></el-table-column>
                        <el-table-column prop="location" label="上次定位地址" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.location">{{scope.row.location}}</span>
                                <span v-else>暂无位置信息</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="batteryPower" label="电量（%）"></el-table-column>
                        <el-table-column prop="time" label="上次通讯时间" width="170"></el-table-column>
                        <!-- <el-table-column label="操作" width="50" align="center" v-if="this.btnList.includes('emp/broadcast/radio')">
                            <template slot-scope="scope">
                                <span class="selectThis" @click="update(scope.$index, empList)">
                                    <img src="../../assets/images/emp/gps/emp_tab.svg"/>
                                </span>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </div>
                <div class="clearfix" v-show="empList.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                    </div>
                </div>
            </div>
            <div class="bottom" v-show="active == 2">
                <div class="table">
                    <el-table :data="HelmetList" :height="tableHeight" :stripe='true'>
                        <el-table-column fixed="left" prop="empName" label="人员姓名"  width="100">
                        </el-table-column>
                        <el-table-column fixed="left" prop="groupName" label="所属班组" width="120">
                        </el-table-column>
                        <el-table-column  fixed="left" prop="code" label="安全帽编号" width="120">
                        </el-table-column>
                        <el-table-column  fixed="left" prop="num" label="通讯次数" width="90">
                        </el-table-column>
                        <el-table-column label="时间" align="center">
                            <el-table-column  v-for=" (item,index) in numList" :key="index" :label="item" width="110">
                                <template slot-scope="porps">
                                    <p> {{porps.row.numList[index].num}}</p>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="HelmetList.length>0">
                    <div class="float-right">
                        <Page v-if="HelmettotalCount" style="margin: 20px 0;text-align: center;" :current.sync="Helmetcurrent" :total="HelmettotalCount" :page-size="HelmetpageSize" show-elevator show-total show-sizer @on-change="HelmetpageChange" @on-page-size-change="HelmetpageSizeChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="Modal" title="广播内容" width="500px;" :mask-closable="false">
            <div style="margin-bottom:10px;font-size:16px">
                <span >广播对象:</span>
                <span v-if="!isAdd">{{deptName}}全体人员</span>
                <span v-if="isAdd">人员{{empName}}</span>
            </div>
            <el-input v-model="content" type="textarea" placeholder="请输入广播内容" maxlength="100" show-word-limit ></el-input>
            <div slot="footer">
                <el-button @click="cancel" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getEmpHelmetLogList,
    getEmpHelmetLatestList,
    getEmpBroadcast,
    getEmpHelmetLogExport,
    getEmpHelmetLatestExport
} from "@/api/api.js";
import {GroupCreate} from "@/mixins/group.js"
import {initYMD} from '@/sever/utils.js';
export default {
    mixins:[GroupCreate],
    data() {
        return {
            previewList:[],//图片预览
            totalCount: "",
            current: 1,
            pageNum: 1,
            pageSize: 10,
            HelmettotalCount: "",
            Helmetcurrent: 1,
            HelmetpageNum: 1,
            HelmetpageSize: 10,
            keyword: "",
            empList:[],
            list:[],
            treeData:[],
            deptId:"",
            Modal:false,
            content:"",
            empId:"",
            isAdd:false,
            deptName:"",
            groupkeyword:"",
            tableHeight:window.innerHeight - 345 ,
            treeGroupId:"",
            corp:"",
            date:new Date(),
            btnList:[],
            numList:[
                "00:00-02:00","02:00-04:00","04:00-06:00","06:00-08:00","08:00-10:00","10:00-12:00",
                "12:00-14:00","14:00-16:00","16:00-18:00","18:00-20:00","20:00-22:00","22:00-24:00"
            ],
            groupId:"",
            corpId:"",
            active:"1",
            HelmetList:[],
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.porjectName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.keyword = "";
                this.date = new Date();
                this.numList = [];
                this.getEmpHelmetLatestListFn();
                this.getEmpHelmetLogListFn();
                this.getGroupTreeList(this.deptId);
            }
        },
    },
    methods: {
        setTabsFn(type){
            this.active = type;
        },
        onSearch(){
            this.pageNum = 1;
            this.current = 1;
            if(this.active == 1) {
                this.getEmpHelmetLatestListFn();
            } else {
                this.getEmpHelmetLogListFn();
            }
        },
        getTime(value) {
            this.date = value;
            this.pageNum = 1;
            this.current = 1;
            this.getALLlist();
        },
        renderContent (h, { root, node, data }) {
            if(this.btnList.includes('emp/broadcast/radio') ){
                /* return (
                    <span class="custom-tree-node">
                        <span class="title" on-click={ () => this.getTreeId(data,node)}>{data.label}</span>
                        <span class="btn lb" on-click={ ($event) => this.broadcast(data, $event) }></span>
                    </span>
                ) */
                return (
                    <span class="custom-tree-node">
                        <span class="title" on-click={ () => this.getTreeId(data,node)}>{data.label}</span>
                    </span>
                )
            }  else{
                return (
                    <span class="custom-tree-node">
                        <span class="title" on-click={ () => this.getTreeId(data,node)}>{data.label}</span>
                    </span>
                )
            }
        },
        download(){
            var formdata = new FormData();
            formdata.append("deptId", this.deptId);
            formdata.append("keyword", this.keyword);
            formdata.append("corpId", this.corp);
            formdata.append("groupId", this.treeGroupId);
            let  config={ 'Content-Type': 'application/x-www-form-urlencoded' };
            if(this.active == 2){
                formdata.append("date", initYMD(this.date));
            }
            if(this.active ==2){
                getEmpHelmetLogExport(formdata, config).then(res=>{
                    if(res.code == 200 ) {
                    window.open(res.data.path)
                    this.$Message.success("导出成功");
                    } else {
                    this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            }else{
                getEmpHelmetLatestExport(formdata, config).then(res=>{
                    if(res.code == 200 ) {
                    window.open(res.data.path)
                    this.$Message.success("导出成功");
                    } else {
                    this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            }

        },
        getEmpHelmetLatestListFn() {
            this.empList = [];
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.keyword,
                deptId: this.deptId,
                corpId: this.corp,
                groupId:this.treeGroupId,
            };
            getEmpHelmetLatestList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.empList =res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getEmpHelmetLogListFn() {
            this.HelmetList = [];
            let params = {
                pageSize: this.HelmetpageSize,
                pageNum: this.HelmetpageNum,
                keyword: this.keyword,
                deptId: this.deptId,
                corpId: this.corp,
                groupId:this.treeGroupId,
                date: initYMD(this.date),
            };
            getEmpHelmetLogList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.HelmetList =res.data.list;
                        this.HelmettotalCount = res.data.total;
                        for(let i = 0 ;i< this.HelmetList.length; i++ ) {
                            this.HelmetList[i]["num"] = 0;
                            for(let j = 0 ; j<this.HelmetList[i].numList.length; j++){
                                 this.HelmetList[i].num += this.HelmetList[i].numList[j].num;
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        onSecach(){
            this.getGroupTreeList(this.deptId)
        },
        pageChange(index) {
            this.pageNum = index;
            this.getEmpHelmetLatestListFn();
        },
        pageSizeChange(index){
            this.pageSize = index;
            this.getEmpHelmetLatestListFn();
        },
        HelmetpageChange(index) {
            this.HelmetpageNum = index;
            this.getEmpHelmetLogListFn();
        },
        HelmetpageSizeChange(index){
            this.HelmetpageSize = index;
            this.getEmpHelmetLogListFn();
        },
        getTreeId(index){
            if(index.id === 0) {
                this.corp ="";
                this.treeGroupId ="";
            } else {
                if(index.children){
                    this.corp = index.id
                    this.treeGroupId ="";
                } else {
                    this.treeGroupId = index.id;
                    this.corp = "" ;
                }
            }
            this.pageNum = 1 ;
            this.current =1;
            this.getEmpHelmetLatestListFn();
        },
        broadcast(data, event){
            event.stopPropagation();
            if(data.label == "全部") {
                this.corpId = "";
                this.groupId = "";
            } else {
                if(data.children && data.children.length >0) {
                    this.corpId = data.id;
                    this.groupId = "";
                } else{
                    this.corpId = "";
                    this.groupId = data.id;
                }
            }
            this.content = "";
            this.Modal =true;
            this.isAdd =false;
            this.deptName = data.label;
        },
        update(index,rows){
            this.content = "";
            this.Modal =true;
            this.empName = rows[index].empName
            this.empId = rows[index].empId;
            this.isAdd =true;
        },
        cancel(){
            this.Modal =false;
        },
        submit(){
            if(this.content == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入广播内容"
                });
                return;
            }
            let params ={
                deptId:this.deptId,
                empId:this.isAdd?this.empId:'',
                content:this.content,
                corpId:this.isAdd?'':this.corpId,
                groupId:this.isAdd?'':this.groupId,
            }
            getEmpBroadcast(params).then(res=>{
                if(res.code == 200) {
                    this.$Message.success("操作成功");
                    this.Modal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getGroupTreeList(this.deptId);
        this.getEmpHelmetLatestListFn();
        this.getEmpHelmetLogListFn();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(0)
        })
    }
};
</script>

<style lang="less" scoped>
// @import "./../../assets/style/emp.less";
@import "./../../assets/style/themeBase.less";

.empBroadcast {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background: #f5f5f5;
    .left{
        width: 250px;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        scrollbar-width: none;
        .ipt{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 70px;
            border-bottom: 1px solid #BFBFBF;
        }
        ul{
            width: 230px;
            margin:0 auto;
            // margin-top: 20px;
            height: calc(100% - 150px);
            overflow-y: scroll;
            list-style: none;
            overflow-y: scroll;
            li{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                cursor: pointer;
                background: #f9f9f9;
                margin-bottom: 5px;
                span{
                    width: 180px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    margin-left: 10px;
                }
                div{
                    width: 50px;
                    margin-right: 10px;
                    display: flex;
                    justify-content: center;
                    i{
                        cursor: pointer;
                        margin-right: 10px;
                    }
                }
            }
            .active{
                background:var(--themeColor);
                color: #fff;
                .direction{
                    background: rgba(255, 255, 255, .4);
                }
            }
        }
        .tree{
            width: 250px;
            margin:0 auto;
            margin-top: 20px;
            height: calc(100% - 100px);
            overflow-y: scroll;
        }
        .tree::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        .tree {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        .tree {
            -ms-overflow-style: none;
        }
        ul::-webkit-scrollbar {
            display: none;
        }
        /*兼容火狐*/
        ul {
            scrollbar-width: none;
        }
        /* 兼容IE10+ */
        ul {
            -ms-overflow-style: none;
        }
    }
    .right {
            flex: 1;
            margin-left: 10px;
            overflow: hidden;
            .top{
                width: 100%;
                height: 72px;
                padding: 0 20px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .search {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .btnList{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        height: 32px;
                        background: #fff;
                        border-radius: 3px ;
                        border: 1px solid #C0BFBE;
                        margin-right: 20px;
                        .item{
                            width: 70px;
                            height: 32px;
                            line-height: 32px;
                            text-align: center;
                            color: #646566;
                            border-right: 1px solid var(--themeColor);
                            cursor: pointer;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            &.active{
                                color: #fff;
                                background-color: var(--themeColor);
                            }
                            &:last-of-type{
                                border-right: none;
                            }
                        }
                    }
                    .list {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-right: 20px;
                        span {
                            margin-right: 6px;
                        }
                    }
                }
                .rightBox{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .rightItem{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .span{
                            width: 80px;
                        }
                    }
                }
            }
            .bottom{
                width: 100%;
                height: calc(100% - 82px);
                margin-top: 10px;
                padding: 20px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 10px;
                .down {
                    width: 98%;
                    margin: 20px auto;
                    display: flex;
                    justify-content: flex-start;
                }
            }

    }
}
/deep/.el-table__fixed-right::before,
/deep/.el-table__fixed::before{
    background-color: transparent !important;
}
/deep/.el-tree-node.is-current > .el-tree-node__content{
    .lb{
        background-image: url('../../assets/images/emp/gps/emp_active.svg');
    }
}
/deep/.custom-tree-node{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .lb{
        width: 18px;
        height: 18px;
        background-image: url('../../assets/images/emp/gps/emp_lb.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-right: 10px;
        cursor: pointer;
    }
    .title{
        width: 150px;
        font-size: 12px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
}
.left::-webkit-scrollbar {
    display: none;
}
/*兼容火狐*/
.left {
   scrollbar-width: none;
}
/* 兼容IE10+ */
.left {
    -ms-overflow-style: none;
}
.item_img{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        width: 24px;
        height: 24px;
    }
}
img{
    display: block;
    width: 24px;
    height: 24px;

}
/deep/.ivu-input-group{
border-radius:20px;
}
/deep/.ivu-input-group .ivu-input{
    border-radius: 20px 0 0 20px;
    border-color:#EBF2F8;
    background:#EBF2F8;
}
/deep/.ivu-input-group-append{
    border-radius: 0 20px 20px 0;
}
/deep/.el-tag.el-tag--success{
    background-color: #E7F8F2;
    border-color: #28D79C;
    color: #3FCF77;
}
/deep/.el-tag{
    border-radius: 2px;
}
/deep/.ivu-select-selection{
    border-radius: 2px;
}
.selectThis{
    display: block;
    width:24px;
    height:24px;
    cursor: pointer;
    padding: 3px;
    &:active{
        background: #F0F4F6;
        box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.16);
        border-radius: 4px 4px 4px 4px;
    }
    img{
        width:18px;
        height:18px;
    }
}
</style>
